<template>
  <view class="container">
    <view class="tips">
      <view> 点击确认后，将从选择的时间到当前时间进行同步； </view>
    </view>

    <view class="sync-time-box">
      <ve-card>
        <ve-form ref="formRef" :model="form" :rules="rules">
          <ve-form-item label="渠道账号" required prop="id">
            <remote-select
              :multiple="false"
              :type="remoteSelectData.attrs.type"
              v-model="form.id"
              v-model:label="remoteSelectData.label"
              :params="{ oldId: form.id }"
              disabled
            />
          </ve-form-item>
          <div class="order-item">
            <div class="text">同步下单时间在下方所选时间之后的订单</div>
            <ve-date-picker
              style="margin-top: 16rpx; margin-bottom: 16rpx"
              v-model="form.startTime"
              mode="datetime"
              :maxDate="maxDateStamp"
              :minDate="minDateStamp"
            />
            <div class="shortcuts">
              <ve-button
                class="shortcuts-item"
                :type="form.startTime == dayjs().format('YYYY-MM-DD 00:00:00') ? 'primary' : 'default'"
                size="mini"
                @click="setStartTime(0)"
              >
                当天
              </ve-button>
              <ve-button
                class="shortcuts-item"
                :type="form.startTime == dayjs().subtract(7, 'day').format('YYYY-MM-DD 00:00:00') ? 'primary' : 'default'"
                size="mini"
                @click="setStartTime(7)"
              >
                近7天
              </ve-button>
              <ve-button
                class="shortcuts-item"
                :type="form.startTime == dayjs().subtract(15, 'day').format('YYYY-MM-DD 00:00:00') ? 'primary' : 'default'"
                size="mini"
                @click="setStartTime(15)"
              >
                近15天
              </ve-button>
              <ve-button
                class="shortcuts-item"
                :type="form.startTime == dayjs().subtract(30, 'day').format('YYYY-MM-DD 00:00:00') ? 'primary' : 'default'"
                size="mini"
                @click="setStartTime(30)"
              >
                近30天
              </ve-button>
              <ve-button
                class="shortcuts-item"
                :type="form.startTime == dayjs().subtract(60, 'day').format('YYYY-MM-DD 00:00:00') ? 'primary' : 'default'"
                size="mini"
                @click="setStartTime(60)"
              >
                近60天
              </ve-button>
              <ve-button
                class="shortcuts-item"
                :type="form.startTime == dayjs().subtract(90, 'day').format('YYYY-MM-DD 00:00:00') ? 'primary' : 'default'"
                size="mini"
                @click="setStartTime(90)"
              >
                近90天
              </ve-button>
            </div>
          </div>
        </ve-form>
      </ve-card>

      <ve-modal v-model="modalValue" title="提示" :showConfirm="false" @cancel="onModalCancel">
        <view class="modal-body">订单正在同步中，同步完成后，将会给您和渠道订单负责人发送消息推送</view>
      </ve-modal>
      <ve-bottom-box size="mini">
        <ve-button type="primary" size="long" @click="onSyncClick">开始同步</ve-button>
      </ve-bottom-box>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getDetailAPI, syncOrderAPI } from '@/api/order/sOrder'
  import dayjs from 'dayjs'
  import { getEnterpriseDetail } from '@/api/common'

  const modalValue = ref(false)
  const formRef = ref()
  const form = ref({
    id: '',
    startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
  })
  const rules = {
    id: {
      required: true,
      message: '请选择',
    },
  }
  const remoteSelectData = {
    prop: 'id',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'target_channel_account',
    },
  }

  const onModalCancel = () => {
    uni.navigateBack()
    modalValue.value = false
  }

  const setStartTime = (days: number) => {
    form.value.startTime = dayjs().subtract(days, 'day').format('YYYY-MM-DD 00:00:00')
  }

  const onSyncClick = () => {
    formRef.value.validate((valid: any) => {
      if (valid) {
        syncOrderAPI(form.value)
          .then(() => {
            modalValue.value = true
          })
          .catch((err: any) => {
            uni.showToast({
              title: err.message,
              icon: 'none',
            })
          })
      }
    })
  }

  onLoad((option: any) => {
    if (option.id) {
      form.value.id = option.id
      remoteSelectData.label = `${option.sourceName}-${option.subject}`
      getDetailAPI({ id: option.id }).then(() => {
        getEnterpriseDetail().then((res: any) => {
          const result = res.result
          if (result.channelOrderMaintenance == 1) {
            form.value.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD 00:00:00')
          } else if (result.channelOrderMaintenance == 2) {
            form.value.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD 00:00:00')
          }
        })
      })
    }
  })

  // 限制最大最小值
  // start 需要限制最大值
  const maxDateStamp = computed(() => {
    return dayjs().endOf('minute')
  })

  // end 需要限制最小值
  const minDateStamp = computed(() => {
    return dayjs().subtract(3, 'month').startOf('day')
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
  }
  .sync-time-box {
    padding: 24rpx;
    .order-item {
      position: relative;
      justify-content: space-between;
      font-weight: 400;
      font-size: 30rpx;
      color: #191c27;
      line-height: 44rpx;
      padding: 32rpx 0rpx;
      border-bottom: 2rpx solid rgba(216, 216, 216, 0.3);
    }
    .radio-choose {
      width: 36rpx;
      height: 36rpx;
      &.active {
        position: absolute;
        top: 34rpx;
        right: 0;
      }
    }
    .shortcuts {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      &-item {
        width: 30%;
        margin-bottom: 24rpx;
      }
    }
  }
  .tips {
    width: 100%;
    background: #e8f3ff;
    padding: 18rpx 32rpx;
    color: #1d2129;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 2;
  }
  .modal-body {
    padding-bottom: 24rpx;
  }

  :deep(.date-picker) {
    .selected {
      color: #165dff !important;
    }
  }
</style>
